<template>
	<view class="login-type-content">
		<view class="main">
			<view class="nav-bar">
				<view class="nav-bar-item nav-bar-item-active"> 修改密码 </view>
			</view>
			<view>
				<view class="login-type-form">
					<view class="input-item">
						<uni-icons type="locked-filled" size="30" color="#42A8F3" class="iconfonts"></uni-icons>
						<input class="login-type-input" type="text" name="loginAccount" v-model="oldPassword"
							placeholder="请输入旧密码" />
					</view>
					<view class="input-item">
						<uni-icons type="locked-filled" size="30" color="#42A8F3" class="iconfonts"></uni-icons>
						<input class="login-type-input" type="password" v-model="newPassword" placeholder="请输入新密码" />
					</view>
					<view class="input-item">
						<uni-icons type="locked-filled" size="30" color="#42A8F3" class="iconfonts"></uni-icons>
						<input class="login-type-input" type="password" v-model="confirmPassword"
							placeholder="请确认新密码" />
					</view>
				</view>
				<button class="confirm-btn" :loading="btnLoading" @click="submit()">
					确认修改
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入api
	import { postUpdatePassword } from "@/proxy/asset/admin.api.js";
	export default {
		data() {
			return {
				oldPassword: "", // 旧密码
				newPassword: "", // 新密码
				confirmPassword: "", // 确认密码
			}
		},
		methods: {
			// 登录接口
			async submit() {
				let oldPassword = this.oldPassword.replace(/\s+/g, '');
				let newPassword = this.newPassword.replace(/\s+/g, '');
				let confirmPassword = this.confirmPassword.replace(/\s+/g, '');
				
				if (oldPassword == "") {
					return this.$toast({
						title: "旧密码不能为空",
						icon: "none",
					});
				}
				if (newPassword == "") {
					return this.$toast({
						title: "新密码不能为空",
						icon: "none",
					});
				}

				if (confirmPassword == "") {
					return this.$toast({
						title: "确认密码不能为空",
						icon: "none",
					});
				}

				if (newPassword !== confirmPassword) {
					return this.$toast({
						title: "新密码不相同",
						icon: "none",
					});
				}
				
				// 将 uni.showModal 封装为 Promise
				const confirmSubmit = () => {
					return new Promise((resolve, reject) => {
						uni.showModal({
							title: '确认提交',
							content: '你确定要修改密码吗？',
							success: function(res) {
								if (res.confirm) {
									resolve(); // 用户点击确认，继续执行提交操作
								} else if (res.cancel) {
									reject('用户取消提交'); // 用户点击取消，返回失败
								}
							}
						});
					});
				};
				
				try {
					// 等待用户确认
					await confirmSubmit();
				
					// 用户点击确认后执行的异步操作
					const result = await postUpdatePassword({
						oldPassword: oldPassword,
						newPassword: newPassword,
					});
				
					console.log("修改密码", result);
					if (result.code == 200) {
						uni.clearStorageSync();
						
						// 提交成功后的操作
						this.$toast({
							title: "修改成功",
							icon: "success",
							success: () => {
								var nav = setTimeout(() => {
									clearTimeout(nav)
									// 跳转登录
									uni.navigateTo({
										url: "/pagesMember/login/login",
									});
								}, 500)
							}
						});
						
					} else {
						this.$toast({
							title: result.data.msg,
						});
					}
				
				} catch (err) {
					// 捕获用户取消或者提交失败的错误
					if (err === '用户取消提交') {
						console.log('用户取消提交');
					} else {
						this.$toast({
							icon: 'none',
							title: '提交失败',
							duration: 2000
						});
						console.log(err);
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.login-type-content {
		position: relative;
		height: 100vh;
		background-color: #F3F4F6;

		.main {
			width: 94vw;
			position: absolute;
			top: 8vw;
			left: 3vw;
			background-color: #fff;
			padding: 65rpx 0;
			border-radius: 20rpx;

			.nav-bar {
				display: flex;
				height: 100rpx;
				justify-content: center;
				align-items: center;
				position: relative;
				z-index: 10;

				.nav-bar-item {
					flex: 1;
					display: flex;
					height: 100%;
					line-height: 96rpx;
					font-size: 30rpx;
					display: flex;
					margin: 0 120rpx;
					justify-content: center;
					color: #42A8F3;
				}

				.nav-bar-item-active {
					border-bottom: 5rpx solid;
				}
			}

			.login-type-form {
				width: 80%;
				margin: 50rpx auto;

				.input-item {
					position: relative;
					height: 90rpx;
					line-height: 90rpx;
					margin-bottom: 30rpx; // 标记

					.iconfonts {
						font-size: 50rpx;
						position: absolute;
						left: 0;
					}

					.login-type-input {
						height: 90rpx;
						padding-left: 80rpx;
						border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
					}
				}
			}

			.login-type-tips {
				padding: 0 50rpx;
				display: flex;
				justify-content: space-between;
			}

			.confirm-btn {
				height: 100rpx;
				width: 615rpx;
				background-color: #42A8F3;
				text-align: center;
				border-radius: 60rpx;
				padding: 15rpx 0;
				color: #fff;
				font-size: 30rpx;
			}
		}
	}
</style>